<template>
  <div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
      router
    >
      <el-menu-item index="/home">
        <el-icon><Grid /></el-icon>
        <span>首页</span>
      </el-menu-item>

      <el-sub-menu
        :index="item.id.toString()"
        v-for="item in store.getters['menu/getMenu']"
        :key="item.id"
      >
        <template #title>
          <div>
            <el-icon>
              <!-- 动态渲染组件  使用component  用哪个is属性注册要渲染的组件 -->
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.title }}</span>
          </div>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="item1.url" v-for="item1 in item.children">
            {{ item1.title }}
          </el-menu-item>
        </el-menu-item-group>
        <!-- <el-menu-item index="/menu">菜单管理</el-menu-item>
        <el-menu-item index="/role">角色管理</el-menu-item>
        <el-menu-item index="/user">管理员管理</el-menu-item> -->
      </el-sub-menu>
      <!-- <el-sub-menu index="2">
        <template #title>
          <div>
            <el-icon><Tools /></el-icon>
            <span>商城管理</span>
          </div>
        </template>
        <el-menu-item index="2-1">1</el-menu-item>
        <el-menu-item index="2-2">2</el-menu-item>
      </el-sub-menu> -->
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { useStore } from "vuex";
let store = useStore();

// 获取仓库中的列表
store.dispatch("menu/getMenuActions");

// 默认选中的路由
let route = useRoute();
// 将路由地址作为默认选中
const defaultActive = route.path;
</script>

<style lang="less" scoped></style>
